import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Table, Spin, Form, Row, Col, Input, Button, Dropdown, Menu, Icon, message, Modal, Select, Tree, TreeSelect, DatePicker, Checkbox, Tabs, InputNumber, Upload, Alert } from 'antd'
import _ from 'lodash'
import moment from 'moment'
import { backUrl } from 'lib/fun'

const Dragger = Upload.Dragger;

// 新建编辑
class Edit extends Component {
  constructor(props) {
    super(props);
    this.state = {
      type: "",
      title: "",
      desc: "",
      loading: false
    }
    this.submitSuccess = false;
  }

  componentWillReceiveProps(nextProps){
    if(!nextProps.visible){
      this.props.form.resetFields();
      this.submitSuccess = false;
      this.setState({
        type: "",
        title: "",
        loading: false
      });
    }
  }

  onCancel = ()=>{
    this.props.onClose(this.submitSuccess);
  }

  runderMsg = ()=>{
    const { type, title, desc } = this.state;
    if(type){
      return (<Alert
                message={ title }
                description={ desc }
                type={ type }
                showIcon
              />)
    }else{
      return ""
    }
  }

  showError = (failCount)=>{
    if(failCount&&failCount>0){
      this.props.onClose(this.submitSuccess);
      this.props.showError();
    }
  }

  render() {
    var self = this;
    const { getFieldDecorator } = this.props.form;
    const { visible, type, rowdata, url, title, data } = this.props;
    
    const props = {
      name: 'file',
      multiple: true,
      showUploadList: false,
      action: backUrl(url),
      data: data?data:{},
      onChange(info) {
        const status = info.file.status;
        if (status == 'uploading') {
          // console.log(info.file, info.fileList);
          self.setState({
            type: "info",
            title: "正在上传文件",
            desc: "",
            loading: true
          });
        }
        if (status === 'done') {
          var result = info.file.response;
          // &&result.data.successCount&&result.data.successCount>0
          if(result.status == 1&&result.data){
            const {successCount, failCount} = result.data
            self.setState({
              type: "success",
              title: "上传成功",
              desc: <span>上传成功{successCount||0}人，上传失败<a href="javascript:;" onClick={self.showError.bind(self, failCount)}>{failCount||0}</a>人</span>,
              loading: false
            });
            self.submitSuccess = true;
          }else{
            self.setState({
            type: 'error',
            title: result.msg||"上传失败",
            desc: "",
            loading: false
          });
          }
        } else if (status === 'error') {
          self.setState({
            type: 'error',
            title: "上传失败",
            desc: "",
            loading: false
          });
        }
      },
    };

    return (<Modal 
              title={title?title:"导入填报表"}
              visible={visible}
              onOk={ this.onCancel } 
              onCancel={ this.onCancel }
              okText="确定" 
              cancelText="取消"
            >
              <Spin spinning={this.state.loading}>
                <div style={{height: 180}}>
                  <Dragger {...props}>
                    <p className="ant-upload-drag-icon">
                      <Icon type="inbox" />
                    </p>
                    <p className="ant-upload-text">请选择要上传的文件</p>
                    <p className="ant-upload-hint"></p>
                  </Dragger>
                </div>
              </Spin>
              <div style={{ marginTop:15 }}>
              {
                this.runderMsg()
              }
              </div>
            </Modal>);
  }
}

function mapStateToProps(state) {
  return {
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({  }, dispatch)
}

module.exports = connect(mapStateToProps,mapDispatchToProps)(Form.create()(Edit)) 